/** * @description : 零售户档案首页-页签组件 * @descriptionDetail : 零售户档案首页-页签组件 * @copyright : 浙江烟草 * @author : dw * @create : 2022-12-05
10:34:25 */
<template>
	<view>
		<!-- 头部内容 -->
		<view class="bg-div">
			<u-image width="101%" height="250px" mode="scaleToFill" :src="shopImageUrl ? shopImageUrl : '/static/certificate/noImg.png'"></u-image>
			<view class="u-p-l-30 u-p-t-20" style="font-weight: bold">{{ homeInfo.companyName }}</view>
			<view class="bg-title u-p-l-30">
				<view class="bg-addr">{{ homeInfo.businessAddr }}</view>
				<view class="bg-btn" @click="goNavigate">
					<u-image width="64rpx" height="64rpx" :src="src"></u-image>
				</view>
			</view>
			<view class="re-icon">
				<view class="re-left u-p-l-10">
					<u-icon :label="homeInfo.managerName" size="30" name="/static/check/manager.png" v-if="homeInfo.managerName"></u-icon>
					<view class="lineSty"></view>
					<view class="ellipse">{{ homeInfo.bizFormatName }}</view>
					<view class="lineSty"></view>
					<u-icon :label="homeInfo.retailTel" size="30" name="phone" @click="modelConfirm"></u-icon>
				</view>
				<!-- 提示框 modelContent -->
				<u-modal v-model="modelShow" :content="modelContent" @confirm="doPhoneNew(homeInfo.retailTel)"></u-modal>
			</view>
		</view>
		<u-card title="经管照片" title-size="28" padding="20rpx 0 10rpx">
			<view class="im-box" slot="body">
				<u-image
					width="178rpx"
					height="178rpx"
					mode="scaleToFill"
					:error-icon="noSrc"
					:src="item.url"
					v-for="(item,index) in JgImage"
					:key="index"
					@click="previewImage('JgImage',index)"
				></u-image>
				<u-image width="178rpx" height="178rpx" mode="scaleToFill" :src="noSrc" v-if="JgImage.length==0"></u-image>
			</view>
		</u-card>
		<u-card title="实地核查照片" title-size="28" padding="20rpx 0 10rpx">
			<view class="im-box" slot="body">
				<u-image width="178rpx" height="178rpx" mode="scaleToFill" :src="noSrc" v-if="auditImage.length==0"></u-image>
				<u-image
					width="178rpx"
					height="178rpx"
					mode="scaleToFill"
					:error-icon="noSrc"
					:src="item.url"
					v-for="(item,index) in auditImage"
					:key="index"
					@click="previewImage('auditImage',index)"
				></u-image>
			</view>
		</u-card>
		<u-card title="专卖平台照片" title-size="28" padding="20rpx 0 10rpx">
			<view class="im-box" slot="body">
				<u-image
					width="178rpx"
					height="178rpx"
					mode="scaleToFill"
					:error-icon="noSrc"
					:src="item.url"
					v-for="(item,index) in otherImage"
					:key="index"
					@click="previewImage('otherImage',index)"
				></u-image>
				<u-image width="178rpx" height="178rpx" mode="scaleToFill" :src="noSrc" v-if="otherImage.length==0"></u-image>
			</view>
		</u-card>
		<u-card title="零售户标签" padding="20rpx 0 10rpx">
			<view class="im-box" slot="body">
				<choice-tag :isDisabled="true" :allowEmptyChoice="false" :customStyle="customStyle" :btnList="tagdata" :single="false"></choice-tag>
			</view>
		</u-card>
	</view>
</template>

<script>
	import checkService from '@/service/check/check.service';
	import choiceTag from '@/components/choice_tag.vue';
	export default {
		components: {
			choiceTag,
		},
		props: {
			licenceInfo: {
				type: Function,
				default: () => {},
			},
		},
		data() {
			return {
				modelShow: false,
				modelContent: '',
				noSrc: '/static/certificate/no-photo.png',
				shopImageUrl: '',
				homeInfo: {},
				otherImage: [],
				auditImage: [],
				JgImage: [],
				tels: [],
				tagdata: [],
				src: '/static/certificate/Navigation.png',
				customStyle: {
					'margin-left': '5px',
					'margin-right': '5px',
					'padding-left': '20px',
					'padding-right': '20px',
					'margin-bottom': '10px',
				},
			};
		},
		created() {
			console.log(this.otherImage);
			this.tags();
		},
		mounted() {
			this.licenceInfo().then((res) => {
				if (res.success) {
					this.homeInfo = res.bean.licenseInfoPre;
				}
			});
		},
		methods: {
			goNavigate() {
				if (!this.homeInfo.longitude || !this.homeInfo.latitude) {
					this.$u.toast('该零售户未采集坐标，无法导航');
					return;
				}
				// #ifdef H5-ONLY
				let parmas = {
					longitude: this.homeInfo.longitude,
					latitude: this.homeInfo.latitude,
					address: this.homeInfo.businessAddr,
				};
				this.setRouteParam(parmas);
				this.$u.route('pages/commonPage/mapNavigatorComponent');
				// #endif

				// #ifndef H5-ONLY
				this.$deviceApi.navigateMap(this.homeInfo.latitude, this.homeInfo.longitude, this.homeInfo.businessAddr);
				// #endif
			},
			tags(reTags) {
				if (!reTags) return;
				this.tagdata = [];
				for (let i = 0; i < reTags.length; i++) {
					let msg = {};
					msg.name = reTags[i].tagName;
					msg.code = 'retag' + i; // reTags[i].tagUuid
					msg.isChoice = 'false';
					this.tagdata.push(msg);
				}
			},
			// 照片预览
			previewImage(type, index) {
				const urls = [];
				this[type].forEach((item) => {
					urls.push(item.url);
				});
				this.$deviceApi.previewImage(urls, urls[index]);
			},
			// 电话显示
			callPhone(e, retailerUuid) {
				if (this.tels.length > 0) {
					// 此处不能使用u-action-sheet，在u-swipe-action中使用时样式异常
					uni.showActionSheet({
						itemList: this.tels,
						itemColor: '#007aff',
						success: ({ tapIndex }) => this.doPhone(this.tels[tapIndex]),
					});
					return;
				}
				this.$u.loading('查询中...');
				checkService.retailerTels(retailerUuid).then((dr) => {
					this.$u.hideLoading();
					if (dr.success) {
						let telDatas = dr.data;
						telDatas.forEach((t) => {
							t.tel && this.tels.push(t.name + ' ' + t.tel);
						});
						uni.showActionSheet({
							itemList: this.tels,
							itemColor: '#007aff',
							success: ({ tapIndex }) => this.doPhone(this.tels[tapIndex]),
						});
					}
				});
				e.stopPropagation();
				e.preventDefault();
			},
			// 拨打电话
			doPhone(telStr) {
				let tel = telStr.substring(telStr.indexOf(' '));
				// #ifndef H5-ONLY
				this.$deviceApi.makePhoneCall(tel);
				// #endif
				// #ifdef H5-ONLY
				this.$u.toast('H5不支持打电话');
				// #endif
			},
			// 拨打电话
			doPhoneNew(telStr) {
				if (this.$u.test.isEmpty(telStr)) return;
				// #ifndef H5-ONLY
				this.$deviceApi.makePhoneCall(telStr);
				// #endif
				// #ifdef H5-ONLY
				this.$u.toast('H5不支持打电话');
				// #endif
			},
			modelConfirm() {
				this.modelShow = true;
				this.modelContent = '是否打给零售户';
			},
		},
	};
</script>

<style lang="scss" scoped>
	@import 'style/certificate/common.scss';
	.tag {
		margin: 0px 20rpx 20rpx 0px;
		width: auto;
		min-width: 155px;
	}
	.lineSty {
		margin: 2rpx 24rpx;
		border-left: 1px solid #000;
	}
	.ellipse {
		text-align: center;
		padding: 2rpx 10rpx;
		border-radius: 20px;
		margin-top: -4rpx;
		position: relative;
		color: #0079f2;
		border: 1px solid #0079f2;
	}
	.bg-title {
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px 10px 0 10px;
	}
	.bg-btn {
	}
	.bg-addr {
		width: 75%;
	}
	.bg-biz {
		font-weight: normal;
		font-size: 12px;
		padding: 2px;
		margin-right: 5px;
		border: 1px solid #1fa3ff;
		color: #1fa3ff;
		border-radius: 5px;
	}
	.re-icon {
		display: flex;
		padding: 10px 10px 0 10px;
		.re-left {
			display: flex;
			width: 100%;
		}
	}
	.im-box {
		.u-image {
			display: inline-block;
			margin: 20rpx 46rpx 0rpx 0;
		}
	}
	/deep/.u-card__head {
		padding: 10px 0 10px 6px;
	}
	/deep/.u-card__body {
		padding-left: 6px;
	}
	/deep/.m-add-wrap {
		display: none;
	}
	/deep/.u-line {
		flex-shrink: 0;
	}
</style>
